<template>
  <div id="sendCard">
    <header-nav linkUrl="sendCardRecord" linkText="发卡记录" :me-card="agentMsg.cardnum"></header-nav>
    <group class="tab_box">
      <!-- 二级代理没有下级代理，不能给进行代理发卡操作 -->
      <tab v-if="agentMsg.level<2" :line-width=3 active-color="#108ee9" custom-bar-width="50%" v-model="usertype">
        <tab-item @on-item-click="tabSwitch">发卡给玩家</tab-item>
        <tab-item @on-item-click="tabSwitch">发卡给代理</tab-item>
      </tab>
      <div class="form_box">
        <div class="user_box">
          <label for="cardNumber">{{usertype==0?'玩家ID':'代理账号'}}: </label>
          <input type="number" :placeholder="'请输入'+(usertype==0?'玩家ID':'代理账号')" name="userid" ref="userid">
        </div>
        <div class="card_box">
          <label for="cardNumber">发卡数量: </label>
          <input type="number" placeholder="请输入发卡数量" name="cardNumber" ref="cardNumber">
        </div>
        <x-button class="buy_btn" type="submit" @click.native="submit">确认发卡</x-button>
      </div>
    </group>
    <group class="table_box">
       <div class="table_dec">
        <h3>{{usertype==0?'最近发卡的玩家':'我的下级代理'}}</h3>
      </div>
      <x-table full-bordered style="background-color:#fff;">
        <thead>
          <tr>
            <th>{{usertype==0?'玩家ID':'代理账号'}}</th>
            <th>{{usertype==0?'玩家名称':'代理昵称'}}</th>
            <th>{{usertype==0?'累计发卡数':'代理余卡'}}</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user,index) in userList" :key="index">
            <td>{{usertype==0?user.gameuserid:user.mobile}}</td>
            <td>{{usertype==0?user.nickname:user.nickname}}</td>
            <td>{{usertype==0?user.cardnum:user.cardnum}}</td>
            <td><x-button class="td_btn" type="primary" :mini="true" @click.native="tabSubmit(usertype==0?user.gameuserid:user.mobile)">发卡</x-button></td>
          </tr>
        </tbody>
      </x-table>
      <div class="table_btn">
        <button @click="getUpPage()">上一页</button>
        <button @click="nextPage()">下一页</button>
      </div>
    </group>
    <!-- 确认发卡弹框提示 -->
    <modal-box ref="modal" @on-confirm="confirm">
      <div slot="modal__bd">
        <div class="modal_msg">
          <img v-if="usertype==0" :src="userMsg.figure" alt="头像">
          <div class="user_text">
              <p>{{usertype==0?`发卡:${cardNumber}`:`发卡数量:${cardNumber}`}}</p>
              <p>{{usertype==0?`名称:${userMsg.nick}`:`代理账号:${agentMsg.agentmobile}`}}</p>
              <p>{{usertype==0?`ID:${userMsg.id}`:`代理名称:${agentMsg.agentnickname}`}}</p>
              <p>{{usertype==0?`余卡:${userMsg.ka}`:`代理房卡:${agentMsg.agentcardnum}`}}</p>
          </div>
        </div>
      </div>
    </modal-box>
  </div>
</template>

<script>
import { Group, Tab, TabItem, XButton, XTable } from "vux";
import headerNav from "../../../components/header/headerNav";
import modalBox from "../../../components/common/modalBox";
export default {
  data() {
    return {
      usertype: 0, //用于控制代理与玩家的标识 0 玩家 1代理
      agentMsg: {}, //代理等级，默认为二级代理
      show: false, //是否显示弹框
      confirmData: {}, //点击发卡按钮带的数据
      userMsg: {}, //请求玩家信息
      agentMsg: {}, //请求代理信息
      cardNumber: 0, //发卡数量
      userList: [],
      userSwitch: {}, //用户页面显示文案
      pagesize: 10, //每页显示条数
      page: 1, //当前页码
      maxPage: 0 //最大页数
    };
  },
  created() {
    //获取代理等级二级代理不能给下级代理发卡
    this.getAgentMsg();
    this.getUserList();
  },
  components: {
    headerNav,
    Group,
    Tab,
    TabItem,
    XButton,
    XTable,
    modalBox
  },
  methods: {
    getAgentMsg() {
      this.apiService.user.userinfo().then(res => {
        this.agentMsg = res.data;
      });
    },
    getUserList(pagesize, page) {
      this.apiService.cart
        .cardplayerlist({
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.userList = res.data.userlist;
          this.maxPage = Math.ceil(res.data.total / this.pagesize);
        });
    },
    getAgentList(pagesize, page) {
      this.apiService.cart
        .cardagentlist({
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.userList = res.data.agentlist;
          this.maxPage = Math.ceil(res.data.total / this.pagesize);
        });
    },
    tabSwitch() {
      //切换的时候清空表单
      this.$refs.userid.value = "";
      this.$refs.cardNumber.value = "";
      if (this.usertype === 0) {
        // 拿玩家相关的tab数据
        this.getUserList();
      } else if (this.usertype === 1) {
        // 拿玩家相关的tab数据
        this.getAgentList();
      }
    },
    submit() {
      let reg = /^[0-9]*[1-9][0-9]*$/;
      let userid = this.$refs.userid.value; //表单输入信息
      if (this.$refs.cardNumber.value == "") {
        this.$refs.modal.opens(
          "alert",
          this.COMPANY_GAME_NAME,
          "发卡数量不能为空"
        );
        return false;
      } else if (!reg.test(this.$refs.cardNumber.value)) {
        this.$refs.modal.opens(
          "alert",
          this.COMPANY_GAME_NAME,
          "请检查发卡数量!"
        );
        return false;
      }
      this.cardNumber = this.$refs.cardNumber.value;
      if (this.usertype === 0) {
        //玩家相关的发卡接口
        this.apiService.user
          .getplayerinfo({
            playerid: userid //玩家id
          })
          .then(res => {
            this.userMsg = res.data;
            this.$refs.modal.opens("confirm", "请核对发卡信息");
          });
      } else if (this.usertype === 1) {
        //代理相关的发卡接口
        this.apiService.user
          .getcarttoagentinfo({
            agentmobile: userid //代理手机号
          })
          .then(res => {
            this.agentMsg = res.data;
            this.$refs.modal.opens("confirm", "请核对发卡信息");
          });
      }
    },
    tabSubmit(id) {
      //渲染发卡表单
      this.$refs.userid.value = id;
    },
    confirm() {
      //发卡成功后请求一下代理的信息，更新一下组件中的卡数
      if (this.usertype === 0) {
        //玩家相关的发卡接口
        this.apiService.user
          .cardtoplayer({
            playerid: this.userMsg.id,
            nickname: this.userMsg.nick,
            cardnum: this.cardNumber
          })
          .then(res => {
            if (res.code == 0) {
              this.getAgentMsg();
              //请求当前页的数据
              this.getUserList(this.pagesize, this.page);
            }
            this.$refs.modal.opens("alert", this.COMPANY_GAME_NAME, res.msg);
          });
      } else if (this.usertype === 1) {
        //代理相关的发卡接口
        this.apiService.user
          .cardtoagent({
            agentmobile: this.agentMsg.agentmobile,
            nickname: this.agentMsg.agentnickname,
            agentcard: this.cardNumber
          })
          .then(res => {
            if (res.code == 0) {
              this.getAgentMsg();
              this.getAgentList(this.pagesize, this.page);
            }
            this.$refs.modal.opens("alert", this.COMPANY_GAME_NAME, res.msg);
          });
      }
    },
    //上一页
    getUpPage() {
      if (this.page > 1) {
        this.page--;
        if (this.usertype === 1) this.getAgentList(this.pagesize, this.page);
        else this.getUserList(this.pagesize, this.page);
      }
    },
    //下一页
    nextPage() {
      if (this.page < this.maxPage && this.maxPage != 0) {
        this.page++;
        if (this.usertype === 1) this.getAgentList(this.pagesize, this.page);
        else this.getUserList(this.pagesize, this.page);
      }
    }
  }
};
</script>
<style scoped>
.form_box {
  padding: 0.5rem 0.7rem 0.2rem;
}
.form_box div {
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_box div label {
  width: 30%;
  padding-right: 0.2rem;
  text-align: right;
  font-size: 0.27rem;
  color: rgb(139, 139, 139);
}
.form_box div input {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 0 0.3rem;
  color: inherit;
  width: 70%;
  height: 0.8rem;
  line-height: 0.8rem;
}
.buy_btn {
  width: 35%;
  margin-top: 0.4rem;
  font-size: 0.3rem;
  background: #108ee9;
}
.table_dec h3 {
  font-size: 0.3rem;
  margin-bottom: 0.25rem;
}
.td_btn {
  line-height: 0.45rem;
  margin-bottom: 0.025rem;
}
#sendCard .vux-table td,
#sendCard .vux-table th {
  width: 25%;
  font-size: 0.26rem;
  line-height: 0.5rem;
}
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.4rem 0;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}

/*弹框样式*/
.modal_msg {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.4rem;
  width: 100%;
}
.modal_msg img {
  margin-right: 0.8em;
  width: 1rem;
  height: 1rem;
  text-align: center;
}
.modal_msg .user_text p {
  color: #000;
  font-size: 0.27rem;
  padding: 0.05rem 0.1rem;
  text-align: left;
}
</style>

<style>
#sendCard .tab_box .weui-cells {
  margin: 0;
  overflow: initial;
}
#sendCard .table_box .weui-cells {
  padding: 0.2rem;
}
#sendCard .modal__bd {
  padding: 0 0.3rem 0.3rem;
}
</style>